<template>
  <div class="ShoppingMall">
    <div class="search-bar">
        <van-row class="van-row-box">
            <van-col span="3" class="col-box">
                <img :src="positionIcon" alt="" class="icon-img">
            </van-col>
            <van-col span="16" class="col-box">
                <div class="input-control">
                  <input type="text">
                </div>
            </van-col>
            <van-col span="5" class="col-box">
              <van-button size="small">搜索</van-button>
            </van-col>
        </van-row>
    </div>
    <!-- swiper vant -->
    <div class="swiper-area">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item,index) in bannerPicArray" :key="index">
          <img :src="item.image" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>   
    
    <div class="type-bar">
      <div class="item" v-for="(cate,index) in category" :key="index" >
        <img :src="cate.image"/>
        <span>{{cate.mallCategoryName}}</span> 
      </div>
    </div>

    <!--AD banner area-->
    <div class="ad-banner">
        <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>

    <!--Recommend goods area-->
    <div class="recommend-area">
        <div class="recommend-title">
            商品推荐
        </div>
        <div class="recommend-body">
            <swiper :options="swiperOption">
              <swiper-slide v-for="(item ,index) in recommendGoods" :key="index">
                <div class="recommend-item">
                  <img :src="item.image" width="80%">
                  <div>{{item.goodsName}}</div>
                  <div>￥{{item.price | moneyFilter}} (￥{{item.mallPrice | moneyFilter}})</div>
                </div>               
              </swiper-slide>
            </swiper>
        </div>
    </div>

    <floor-component :floorData="floor1" :floorTitle="floorName.floor1"></floor-component>
    <floor-component :floorData="floor2" :floorTitle="floorName.floor2"></floor-component>
    <floor-component :floorData="floor3" :floorTitle="floorName.floor3"></floor-component>

    <!--Hot Area-->
    <div class="hot-area">
        <div class="hot-title">热卖商品</div>
        <div class="hot-goods">
          <!--这里需要一个list组件-->
          <van-list>
            <van-row gutter="20">
              <van-col span="12" v-for="( item, index) in hotGoods" :key="index">
                <goods-info :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
              </van-col>
            </van-row>
          </van-list>
        </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import floorComponent from '../component/floorComponent'
import goodsInfo from '../component/goodsInfo'
import {toMoney} from '@/filter/moneyFilter.js'
import url from '@/serviceAPI.config.js'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      swiperOption:{
        slidesPerView:3
      },
      positionIcon:require('../../assets/images/position.png'),
      bannerPicArray:[
          {imageUrl:'http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic001.jpg'},
          {imageUrl:'http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic002.jpg'},
          {imageUrl:'http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic003.jpg'},
      ],
      category:[],
      adBanner:{},
      recommendGoods:[],
      floor1:[],
      floor2:[],
      floor3:[],
      floorName:{},
      hotGoods:[],
    }
  },
  computed: {
    
  },
  filters:{
    moneyFilter(money){
      return toMoney(money)
    }
  },
  created(){
    this.getAllList();
  },
  methods:{
    getAllList(){
      axios.get(url.getShoppingMallInfo).then(res=>{
        let response=res.data;
        this.category=response.data.category;
        this.adBanner = response.data.advertesPicture //获得广告图片
        this.bannerPicArray=response.data.slides;
        this.recommendGoods = response.data.recommend  //推荐商品
        this.floor1 = response.data.floor1              //楼层1数据
        this.floor2 = response.data.floor2              //楼层2数据
        this.floor3 = response.data.floor3              //楼层3数据
        this.floorName = response.data.floorName        //楼层名称
        this.hotGoods = response.data.hotGoods           //热卖商品
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  components:{
    swiper,swiperSlide,floorComponent,goodsInfo
  }
}
</script>


<style scoped>
  .search-bar{
    width: 100%;
    height: 2.2rem;
    background-color: #e5017d;
    line-height: 2.2rem;
  }
  .van-row-box{
    width: 100%;
    height: 100%;
  }
  .col-box{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-bar .icon-img{
    width: 62%;
  }
  .input-control{
    width: 100%;
    height: 1.5rem;
    border-bottom: 1px solid #fff;
  }
  .input-control input{
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    vertical-align: top;
    color: #ffffff;
    background: transparent;
    padding: 0 .6rem;
    box-sizing: border-box;
  }
  .swiper-area{
    min-height: 8rem;
  }
  .swiper-area img{
      width: 100%;    
  }
  .type-bar{
    background-color: #fff;
    margin:0 .3rem 0 .3rem;
    border-radius: .3rem;
    font-size:14px;
    display: flex;
    flex-direction:row;
    flex-wrap:nowrap;
  }
  .type-bar .item{
    padding: .3rem;
    font-size: 12px;
    text-align: center;
  }
  .type-bar .item img{
    width: 100%;
  }
  .recommend-area{
       background-color: #fff;
       margin-top: .3rem;
  }
  .recommend-title{
      border-bottom:1px solid #eee;
      font-size:14px;
      padding:.2rem;
      color:#e5017d;
  }
  .recommend-body{
       border-bottom: 1px solid #eee;
   }
 
  .recommend-item{
      width:99%;
      border-right: 1px solid #eee;
      font-size: 12px;
      text-align: center;
  }

  .hot-area{
      text-align: center;
      font-size:14px;
      height: 1.8rem;
      line-height:1.8rem;
  }
  
</style>
